<template>
  <el-dialog title="属性管理" :close-on-click-modal="false" :visible.sync="visible" width="400px">
    <el-form style="min-height: 200px;">
      <el-form-item>
        <el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
        <el-checkbox-group class="mt-10" v-model="checkList" @change="handleCheckListChange">
          <el-checkbox v-for="check in tagList" :label="check.value" :key="check.value">{{check.label}}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="visible = false">取 消</el-button>
      <el-button size="small" type="primary" @click="confirm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {movieEditTag, getTag} from '@/api/viewing';

export default {
  props: ['movieId', 'tags'],
  data() {
    return {
      visible: false,
      checkAll: false,
      checkList: this.tags || [],
      tagList: [
        // {value: 'best', label: '优秀口碑'},
        // {value: 'hot', label: '正在热映'},
        // {value: 'mostPlay', label: '想看人数'},
      ]
    }
  },
  watch: {
    tags(value) {
      this.checkList = value || [];
    }
  },
  methods: {
    show() {
      this.visible = true;
    },
    handleCheckAllChange(value) {
      this.checkList = value ? this.tagList.map(item => item.value) : [];
    },
    handleCheckListChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.tagList.length;
    },
    async getTag() {
      const {code, data} = await getTag();
      this.tagList = data.map(item => {
        return {
          value: item,
          label: item
        }
      })
    },
    async confirm() {
      try {
        let postData = {movieId: this.movieId, tags: this.checkList};
        const {data} = await movieEditTag(this.movieId, postData);
        this.$message.success('保存成功!');
        this.visible = false;
        this.$emit('change', this.checkList)
      } catch (error) {
        
      }
    },
  },
  created() {
    this.getTag();
  }
} 
</script>

<style lang="scss" scoped>
</style>